<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui File Upload</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="assets/lib/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<div style="width: 500px">
    <div id="file-upload" class="layui-upload-drag" style="box-sizing: border-box;width: 100%">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
    </div>
    <div class="layui-elem-quote layui-quote-nm" style="margin: 10px 0 20px 0;text-align: center">
        <p style="font-weight: bold">预览图：</p>
        <div class="layui-upload-list" id="upload-imgs"></div>
    </div>
    <div class="layui-progress layui-progress-small" lay-showpercent="yes" lay-filter="upload-progress">
        <div class="layui-progress-bar" lay-percent=""></div>
    </div>
    <div id="upload-fail"></div>
</div>

<button id="upload">上传</button>

<script src="assets/lib/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['upload', 'element', 'layer', 'jquery'], function () {
        var $ = layui.jquery,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer;

        // 文件上传
        var fileUpload = upload.render({
            // 指定容器
            elem: '#file-upload',
            // 指定上传接口
            url: 'file/upload',
            // 指定额外的请求头
            headers: {},
            // 设置请求类型，默认post
            method: 'post',
            // 指定额外的参数，如：{id: 123, abc: 'xxx'}
            data: {},
            // 设置文件大小限制，单位 KB，默认0（即不限制）。不支持ie8/9
            size: 1024 * 10,
            // 设定文件域的字段名，默认file
            field: 'file',
            // 是否自动上传
            auto: false,
            // 指向一个按钮触发上传，一般配合 auto: false 来使用
            bindAction: "#upload",
            // 是否支持多文件上传，不支持ie8/9
            multiple: true,
            // 设置同时可上传的文件数量，一般配合 multiple 参数出现，不支持ie8/9
            number: 3,
            // 允许类型：images（图片）、file（所有文件）、video（视频）、audio（音频），默认images
            // accept: 'file',
            // 允许格式
            // exts: 'zip|rar|7z',
            // 是否接受拖拽的文件上传，不支持ie8/9
            drag: true,
            // 进度条回调
            progress: function (n, elem, e) {
                element.progress('upload-progress', n + '%');
                if (n === 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            },
            // 选择文件后的回调函数
            choose: function (obj) {
                // 进度条复位
                element.progress('upload-progress', '0%');
                // 预读文件前，清空文件列表
                $('#upload-imgs').html('');
                // 预读本地文件，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload-imgs').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="max-width: 100px">')
                });
            },
            // 文件提交上传前的回调
            before: function (obj) {
                layer.msg('上传中', {icon: 16, time: 0});
            },
            // 执行上传请求后的回调，多个文件上传会执行多次
            done: function (res, index, upload) {
                console.log(res);
                if (res.code !== 200) {
                    return layer.msg('上传失败');
                }

                layer.msg('上传成功');
                // 置空上传失败的状态
                $('#upload-fail').html('');
            },
            // 多文件上传成功的回调
            allDone: function (obj) {
                if (obj.total === obj.successful) {
                    layer.msg('全部文件上传成功');
                } else {
                    layer.msg(obj.aborted + '个文件上传失败');
                }
            },
            // 执行上传请求出现异常的回调（一般为网络异常、URL404等）
            error: function (index, upload) {
                // 文件上传重试
                var uploadFail = $('#upload-fail');
                uploadFail.html('<span style="color: #e14614;">上传失败</span> <a class="layui-btn layui-btn-xs reload">重试</a>');
                uploadFail.find('.reload').on('click', function () {
                    fileUpload.upload();
                });
            }
        });

    });
</script>

</body>
</html>